<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="false">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row :gutter="48">
          <a-col :span="12">
            <a-form-model-item label="物料小类" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="provisionSmall">
              <a-select
                v-model="model.provisionSmall"
                :disabled="formDisabled"
                placeholder="请选择物料小类"
                :showSearch="true"
                :allowClear="true"
                :filterOption="filterOption"
                @change="provisionSmallChange"
                :getPopupContainer="triggerNode => {return triggerNode.parentNode}"
              >
                <a-select-option v-for="item in provisionSmallList" :key="item.id" :value="item.id">{{ item.categoryName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- 迭代16.6物料名称多选 -->
          <a-col :span="12">
            <a-form-model-item label="物料名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialName">
              <select-material-input
                v-model="model.materialName"
                multi
                :disabled="formDisabled"
                :materialFlag="true"
                :materialSmall="model.provisionSmall"
                @back="materialNameBack"/>
            </a-form-model-item>
          </a-col>
          <!-- 迭代16.6隐藏字段 -->
          <!-- <a-col :span="12">
            <a-form-model-item label="物料编号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="materialBillId">
              <a-input :disabled="formDisabled" v-model="model.materialBillId" placeholder="请输入物料编号" disabled></a-input>
            </a-form-model-item>
          </a-col> -->
          <!-- <a-col :span="12">
            <a-form-model-item label="品牌" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="brand">
              <a-input :disabled="formDisabled" v-model="model.brand" placeholder="请输入品牌" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="规格型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="specification">
              <a-input :disabled="formDisabled" v-model="model.specification" placeholder="请输入规格型号" disabled ></a-input>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="数量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="amount">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.amount" placeholder="请输入数量" style="width: 100%" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="单位" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="unit">
              <j-dict-select-tag :disabled="formDisabled" type="list" v-model="model.unit" placeholder="请选择单位"  dictCode="unit_type" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="参考价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="referencePrice">
              <a-input-number :disabled="formDisabled" :max="99999999" :min="0"  v-model="model.referencePrice" placeholder="请输入参考价格" style="width: 100%" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="预算价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="budgetAmount">
              <a-input-number
                :disabled="formDisabled"
                :max="99999999"
                :min="0"
                :precision="2"
                v-model="model.budgetAmount"
                placeholder="请输入预算价格"
                style="width: 100%"
              />
            </a-form-model-item>
          </a-col> -->
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { getAction } from '@/api/manage'
  import SelectMaterialInput from '@/views/scy/components/SelectMaterialInput'

  export default {
    name: 'ErpPurchaseApplyInvitationDetailForm',
    components: {
      SelectMaterialInput
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
      provisionBroad: {
        type: String,
        default: ''
      }
    },
    data () {
      return {
        flag: false,
        model: {
         },
        labelCol: {
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 24 }
        },
        confirmLoading: false,
        materialDetail: [], // 物料名称数组
        validatorRules: {
          provisionSmall: [
              { required: true, message: '请选择采购小类!', trigger: 'blur' }
          ],
          materialName: [
              { required: true, message: '请选择物料!', trigger: 'change' }
          ]
          // amount: [
          //     { required: true, message: '请输入数量!', trigger: 'blur'},
          //     { pattern: /^[0-9]*[1-9][0-9]*$/, message: '请输入正整数!' },
          // ],
          // budgetAmount: [
          //     { required: true, message: '请输入预算价格!', trigger: 'blur' },
          // ]
        },
        url: {
          queryProvisionBroadList: '/api/erp/purchase/material/erpMaterialCategory/queryAllParent',
          queryProvisionSmallList: '/api/erp/purchase/material/erpMaterialCategory/queryChildrenByParentId'
        },
        provisionBroadList: [],
        provisionSmallList: []
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      }
    },
    created () {
       // 备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.$refs['form'].clearValidate();
        this.findProvisionBroadList()
        this.model = Object.assign({}, record);
        this.provisionSmallList = []
        if (this.provisionBroad) {
          this.findProvisionSmallList(this.provisionBroad)
        }
        this.visible = true;
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      findProvisionBroadList() {
        const that = this
        that.provisionBroadList = []
        getAction(this.url.queryProvisionBroadList).then(res => {
          if (res.success) {
            res.result.forEach((res) => {
              that.provisionBroadList.push({ 'id': res.id, 'categoryName': res.categoryName })
            })
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      // handleChange(value) {
      //   this.provisionSmallChange()
      //   this.provisionSmallList = []
      //   this.$set(this.model, 'provisionSmall', undefined);
      //   if (!!value) {
      //     this.findProvisionSmallList(value)
      //   }
      // },
      findProvisionSmallList(value) {
        const that = this
        const parentId = value
        getAction(this.url.queryProvisionSmallList, { parentId }).then(res => {
          if (res.success) {
            res.result.forEach((res) => {
              that.provisionSmallList.push({ 'id': res.id, 'categoryName': res.categoryName })
            })
          } else {
            that.$message.warning(res.message)
          }
        })
      },
      materialNameBack(data) {
        this.materialDetail = data
        // const material = data[0]
        // this.$set(this.model, 'materialBillId', material.materialBill)// 物料编码
        // this.$set(this.model, 'brand', material.brand)// 品牌
        // this.$set(this.model, 'specification', material.specification)// 规格型号
        // this.$set(this.model, 'unit', material.unit)// 单位
        // this.$set(this.model, 'referencePrice', material.referencePrice)// 参考价格
        // this.$set(this.model, 'amount', null)// 数量
        // this.$set(this.model, 'budgetAmount', null)// 预算价格
      },
      provisionSmallChange() {
        this.$set(this.model, 'materialName', null)// 物料名称
        this.materialDetail = [] // 物料数组
        // this.$set(this.model, 'materialBillId', null)// 物料编码
        // this.$set(this.model, 'brand', null)// 品牌
        // this.$set(this.model, 'specification', null)// 规格型号
        // this.$set(this.model, 'unit', null)// 单位
        // this.$set(this.model, 'referencePrice', null)// 参考价格
        // this.$set(this.model, 'amount', null)// 数量
        // this.$set(this.model, 'budgetAmount', null)// 预算价格
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            that.$emit('ok', this.model, this.flag, this.materialDetail);
          }
        })
      }
    }
  }
</script>
